<template>
    <div>
        房型名称:<input type="text" v-model="infoc.rootname" />
        <input type="button" class="btn btn-success" value="查询" @click="getList" />
        <h1>房型列表</h1>
       <table class="table table-bordered">
        <input type="button" value="房型增加" class="btn btn-success" @click="ok" />

        <input type="button" value="批量启用" class="btn btn-success" @click="Getstate(1)" />
        <input type="button" value="批量禁用" class="btn btn-success" @click="Getstate(0)" />
        <input type="button" value="批量删除" class="btn btn-success" @click="getD" />
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="getAll"/></td>
                    <td>房型名称</td>
                    <td>数量</td>
                    <td>状态</td>
                    <td>开始时间</td>
                    <td>结束时间</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in infoq.list" :key="item.id" :value="item.id">
                    <td><input type="checkbox" v-model="ids" @change="checkone" :value="item.id" /></td>
                    <td>{{ item.rootname }}</td>
                    <td>
                        <img :src="( item.photo)" alt="" width="100" height="100">
                    </td>
                    <td>{{ item.num }}</td>
                    <td>{{ item.state==1?"启用":"禁用" }}</td>
                    <td>{{ item.datetime }}</td>
                    <td>{{ item.update }}</td>
                    <td>
                        <input type="button" class="btn btn-success" value="删除" @click="del(item.id)" />
                        <input type="button" class="btn btn-success" value="修改" @click="upd(item.id)" />
                    </td>
                </tr>
            </tbody>
       </table>
       <div>
            当前第{{ infoc.pageindex }}页/共{{ infoq.totacount }}条/共{{ infoq.totapage }}页
            <input type="button" value="首页" @click="Fen(1)" /> 
            <input type="button" value="上一页" @click="Fen(infoc.pageindex -1)" /> 
            <input type="button" value="下一页" @click="Fen(infoc.pageindex +1)" /> 
            <input type="button" value="尾页" @click="Fen(infoq.totapage)" /> 
       </div>

    </div>
</template>

<script setup lang="ts">
import { onMounted,reactive,ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios'

const route=useRoute();
const router=useRouter();
//单选框
let checked=ref(false);
//多选框
let ids=ref([]);
//单选
const getAll=()=>{
   checked.value=!checked.value;
   if(checked.value==true){
      ids.value=infoq.list.map((item:any)=>{
         return item.id;
      })
   }
   else{
       ids.value=[];
   }
}
//全选全不选
const checkone=()=>{
    if(ids.value.length==infoq.list.length){
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}



const ok=()=>{
    router.push('/RootAdd');
}
//传数据
const infoc:any=reactive({
    pageindex:1,
    pagesize:3,
    rootname:''
})
//取数据
const infoq:any=reactive({
    list:[],
    totacount:0,
    totapage:0
})

//批量删除
const getD=()=>{
   var f=confirm('确定要删除吗?');
   if(f){
        axios({
            url:'/api/Root/Delon',
            method:'delete',
            params:{
                id:ids.value.toString(),
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功!');
                getList();
            }
            else{
                alert('删除失败!');
            }
        })
   }
}


//批量修改状态
const Getstate=(state:any)=>{
    var f=confirm('确定要修改吗?');
    if(f){
        axios({
        url:'/api/Root/Ztno',
        method:'get',
        params:{
            id:ids.value.toString(),
            state:state,
        }
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功!');
            getList();
        }
        else{
            alert('修改失败!');
        }
    })
    }
   
}


//分页
const Fen=(num:any)=>{
    if(num<1){
        infoc.pageindex=1;
        return;
    }
    if(num>infoq.totapage){
        infoc.pageindex=infoq.totapage;
        return;
    }
    infoc.pageindex=num;
    getList();
}

//钩子函数
onMounted(()=>{
    getList();
})
//显示
const getList=()=>{
    axios({
        url:'/api/Root/GEtList',
        method:'get',
        params:infoc
    })
    .then(res=>{ 
        console.log(res);
        infoq.list=res.data.list;
        infoq.totacount=res.data.totacount;
        infoq.totapage=res.data.totapage;
    })
    .catch(err=>{
        console.log(err);
    })
}
//单删
const del=(sid:any)=>{
    var d=confirm('确定要删除吗?');
    if(d){
           axios({
                url:'/api/Root/Del',
                method:'delete',
                params:{
                    id:sid
                }
            })
            .then(res=>{
                if(res.data>0){
                    alert('删除成功!');
                    getList();
                }
                else{
                    alert('删除失败!');
                }
            }) 
    }
    
}
//修改
const upd=(xid:any)=>{
    router.push({
        path:'/RootXiu',
        query:{
            id:xid
        }
    })  
    
}


</script>